<script setup>
import { reactive, ref, computed } from 'vue'
import dayjs from 'dayjs'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'

const zong = ref({
    sale_type: "2",
    user_id: "",
    post_id: "",
    record_type: ""
})


const options = ref([
    {
        value: "1",
        label: "物件竞价倾向度",
    },
    {
        value: "2",
        label: "加值服务推荐倾向度",
    }
])


const formRef = ref()
// 表单校验
const rules = {
    user_id: [
        { required: true, message: '请输入用户Id', trigger: 'blur' },
        // {
        //     pattern: /^\S{1,10}$/,
        //     message: '分类名必须是 1-10 位的非空字符',
        //     trigger: 'blur'
        // }
    ]
}

const resetRecordType = () => {
    zong.value.record_type = ""; 
};

const search = async () => {
    if (!formRef.value) return;
    try {
        await formRef.value.validate()

        const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })

        axios.post("search_propensity/", zong.value)
        .then((res) => {
            loading.close()
            const formattedMessage = res.data.message.replace(/\n/g, '<br>');
            ElMessage({
                message:  formattedMessage,
                type: 'success',
                showClose: true,
                duration: 0,
                dangerouslyUseHTMLString: true
            })
        })
        .catch((error) => {
            loading.close()
            ElMessage({
                message: '查询失败，请检查查询项（用户ID或物件ID）是否错误',
                type: 'error',
                showClose: true,
                duration: 3000,
            })
            console.error(error);
        });
    } catch (error) {
        
    }
}
</script>


<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span style="color: #ffffff;">物件倾向度查询</span>
            </div>
        </template>

        <el-row>
            <el-col :span="24">
                <div style="display: flex; justify-content: center; ">

                    <el-form ref="formRef" :rules="rules"  :model="zong" label-width="auto" style="max-width: 600px; margin: 0 auto; text-align: center;">
                        <label style="color:red; text-align: center;" for="">说明：当前加值服务推荐倾向度，仅有出售业务存在</label>
                        <el-form-item label="类型：" style="display: flex; align-items: center;">

                            <el-radio-group v-model="zong.sale_type" @change="resetRecordType" class="ml-4">
                                <el-radio label="1" value="1" size="large">出租</el-radio>
                                <el-radio label="2" value="2" size="large">出售</el-radio>
                            </el-radio-group>
                        </el-form-item>


                        <el-form-item label="选择倾向度类型：">
                            <el-select v-model="zong.record_type" class="m-2" placeholder="请选择查询类型(竞价&加值服务)"
                                style="width: 400px;">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                                    :disabled="item.value === '2' && zong.sale_type === '1'"></el-option>
                            </el-select>
                        </el-form-item>


                        <el-form-item class="custom-label" label="用户ID：" prop="user_id">
                            <el-input v-model="zong.user_id" placeholder="输入用户ID" style="margin-bottom: 6px;" />
                        </el-form-item>

                        <el-form-item label="物件ID：">
                            <el-input v-model="zong.post_id" placeholder="输入物件ID" />
                        </el-form-item>

                        <el-form-item label=" ">
                            <el-button type="primary" @click="search">搜寻</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </el-card>
</template>


<style scoped>
.custom-label-text {
    max-width: 126px;
    /* 设置最大宽度 */
    word-wrap: break-word;
    /* 文本过长时自动换行 */
}
</style>